<template>
  <div id="user-detail" class="content-box">
    <!-- 用户信息 -->
    <div class="user-info mtop-10">
      <div class="avatars">
        <img
          v-if="user"
          class="img-percent"
          v-lazy="`${userInfo.profile.avatarUrl}?param=300y300`"
        >
      </div>
      <div class="info mleft-20">
        <div class="font-24 font-weight">
          {{ user ? userInfo.profile.nickname : '网友008' }}
        </div>
        <div class="info-btn">
          <div class="left">
            <div class="level mright-10">{{ `Lv ${ user ? userInfo.level : '0'}` }}</div>
            <a-icon v-if="user && userInfo.profile.gender === 1" type="man" style="color: rgb(61, 161, 209);"/>
            <a-icon v-else type="woman" style="color: rgb(234, 90, 149);"></a-icon>
          </div>
          <div class="right">
            <a-button class="br-20">
              <a-icon type="mail" class="mright-10" />
              发私信
            </a-button>
            <a-button class="br-20 mleft-10">
              <a-icon type="plus" class="mright-10" style="color: #ec4141;"/>
              关注
            </a-button>
          </div>
        </div>
        <div class="line"></div>
        <div class="info-total mtop-10">
          <div class="total-item" v-for="item in infoList" :key="item">
            <span class="font-20 font-weight">{{ user ? getData(item) : '0' }}</span>
            <span class="font-12 text-item">{{ item }}</span>
          </div>
        </div>
        <div class="desc-item mtop-10 font-14">
          所在地区：{{ position }}
        </div>
        <div class="desc-item mtop-10 font-14">
          个人介绍：{{ user ? userInfo.profile.signature : '暂无个人简介' }}
        </div>
      </div>
    </div>
    <!-- tab栏 -->
    <Tabs :tabList="tabList" @target="isCreate = !isCreate">
      <!-- <template #other>
        <div class="opera-btns">
          <a-icon type="windows" />
          <a-icon type="menu" />
          <a-icon type="bars" />
        </div>
      </template> -->
    </Tabs>
    <!-- 创建歌曲列表 -->
    <ContentCard :dataList="isCreate ? uList : cList" @goDetail="goDetail" />
    <!-- <ContentCard v-show="!isCreate" :dataList="cList" /> -->

    <!-- <Empty  /> -->
  </div>
</template>

<script>
import { userInfo, playListU } from '@/api/detail';
import Tabs from '@/components/Content/Tabs';
// import Empty from '@/components/Library/Empty';
import ContentCard from '@/components/Content/ContentCard';
const city = require('@/assets/json/city.json');

export default {
  name: 'userDetail',

  components: {
    Tabs,
    // Empty,
    ContentCard
  },

  data() {
    return {
      params: {
        uid: this.$route.query.id, // 用户id
        timestamp: new Date().getTime()
      },
      // 用户歌单参数
      paramsU: {
        uid: this.$route.query.id,
        limit: 20,
        offset: 0,
        timestamp: new Date().getTime()
      },
      // 用户信息
      userInfo: {},
      // 创建歌单列表
      uList: [],
      // 收藏歌单列表
      cList: [],
      // 是否显示创建歌单
      isCreate: true,
      // 地理位置
      position: '',
      infoList: ['动态', '关注', '粉丝'],
      tabList: [{
        tabName: '创建的歌单',
        isActive: true,
        id: 'createList'
      }, {
        tabName: '收藏的歌单',
        isActive: false,
        id: 'collectionList'
      }]
    };
  },

  created() {
    // this.getUserInfo();
  },

  computed: {
    // 防止控制台报错undefined,需要进行判断
    user() {
      return this.userInfo && this.userInfo.profile;
    }
  },

  watch: {
    // 用户id发生变化就需要调一次接口
    '$route.query.id': {
      handler(value) {
        // 手动改变一下传参id
        this.params.uid = value;
        this.paramsU.uid = value;
        this.getUserInfo();
      },
      immediate: true
    }
  },

  methods: {
    async getUserInfo() {
      const info = await userInfo(this.params);
      const res = await playListU(this.paramsU);
      // 收藏的歌单
      this.cList = res.data.playlist.filter(create => create.subscribed);
      // 创建的歌单
      this.uList = res.data.playlist.filter(collect => !collect.subscribed);
      this.userInfo = Object.freeze(info.data);
      // 省份数据
      const pName = 
        city.find(p => p.adcode == this.userInfo.profile.province);
      // 城市数据
      if (pName) {
        const cName = 
          pName.districts.find(c => c.adcode == this.userInfo.profile.city);
        this.position = `${pName.name} ${cName.name}`;
      }
    },
    getData(value) {
      switch (value) {
        case '动态':
          return this.userInfo.profile.eventCount;
        case '关注':
          return this.userInfo.profile.newFollows;
        default:
          return this.userInfo.profile.followeds;
      }
    },
    // 点击跳转详情页
    goDetail(id) {
      this.$router.push({
        name: 'playlistdetail',
        query: { id }
      });
    }
  },
};
</script>

<style lang="less" scoped>
#user-detail {
  height: 100%;
  .user-info {
    display: flex;
    align-items: center;
    .avatars {
      width: 200px;
      height: 200px;
      border: 1px solid #e6e6e6;
      border-radius: 50%;
      overflow: hidden;
    }
    .info {
      flex: 1;
      .info-btn {
        display: flex;
        height: 40px;
        line-height: 40px;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          .level {
            display: inline-block;
            border: 1px solid #ec4141;
            padding: 0 2px;
            font-size: 14px;
            height: 22px;
            line-height: 22px;
            color: #ec4141;
            border-radius: 2px;
          }
        }
      }
      .line {
        height: 1px;
        border-bottom: 1px solid #e0e0e0;
      }
      .info-total {
        display: flex;
        align-items: center;
        .total-item {
          width: 110px;
          display: flex;
          flex-direction: column;
          padding-left: 10px;
          // align-items: center;
          border-right: 1px solid #e6e6e6;
          &:last-child {
            border-right: none;
          }
        }
      }
      .text-item, .desc-item {
        color: #676767;
      }
    }
  }
  /deep/li.tab-item {
    font-size: 18px;
  }
  /deep/ul.tab-list {
    margin-left: 0 !important;
  }
}
</style>